class Goods{
    constructor(){
        this.cont=document.querySelector('.page')
       this.goodsName=document.querySelector('.xi-product')
       this.show();


    }

   async show(){
        let data=location.href
        let newData=data.split('=')
        let newId=newData[1]
       
        let goodList= await axios.get({url:' http://localhost:53000/course1'})
        let html=''
        let goodName=''
       goodList.forEach(ele=>{
         
           if(ele.id==newId){
             html=`<div class="product-box">
            <!-- 左边轮播 -->
            <div class="img-left">
                <div class="container">
                    <ul class="wrapper">
                        <li style="display:block">
                   
                       

                            <a href="javascript:;">
                                <img src="${ele.src}">
                            </a>
                        </li>
    
                    </ul>
    
    
                    <!--翻页按钮区域-->
                    <div class="turning">
                        <a href="javascript:;">&lt;</a>
                        <a href="javascript:;">&gt;</a>
                    </div>
                    <!--分页器区域-->
                    <div class="pagination">
                        <span class="active"></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
            <!-- 右边产品介绍 -->
            
          
            <div class="product-con">

            

                <h2>${ele.name}</h2>
                <p class="sale-decr">
                    购机享12期免息，下单抽奖言小米定制品」骁龙865处理器/1亿像案8K电影相机/双模5G/新一代LPDDR5内存/对称式立体声Ⅰ90Hz刷新率 180Hz采样率/UFS
                    3.0高速存储/全面适配Wi-Fi6/超强VC液冷散热/30W极速闪充 30W无线闪充 10W无线反充/4780mAh大电量/多功能NFC
    
                </p>
                <p class="company-info">
                    小米自营
                </p>
                <p class="price-info">
                    <span>
                     ${ele.price}
                    </span>
                </p>
                <div class="line">
    
                </div>
                <div class="product-address">
                    <i class="iconfont icon-dingwei icon"></i>
                    <div class="address-con">
                        <div>
                            <div class="address-info">
                                <span>北京</span>
                                <span>北京市</span>
                                <span>海淀区</span>
                                <span>清河街道</span>
                                <a href="javascript;">修改</a>
                            </div>
                        </div>
                        <div class="storage">
                            <span>有现货</span>
                        </div>
                    </div>
                </div>
                <div class="buychoies">
                    <div class="title fs18">
                        选择颜色
                    </div>
                    <ul class="clearfix">
                        <li title="花影惊鸿" class="active">
                            <a href="">
                                花影惊鸿
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="selected-list">
                    <ul>
                        <li>
                           ${ele.name}花影惊鸿 通用
                            <span class="fr">${ele.price}</span>
                        </li>
                    </ul>
                    <div class="total-price">
                        总计：${ele.price}
                    </div>
                </div>
                <div class="btn-box">
                    <div class="putin"  onclick="Goods.addCart(${ele.id},1)"> <a href="javascript:0;">加入购物车</a></div>
                    <div class="likes"> <a href="#"><i class="iconfont icon-xin"></i>喜欢</a></div>
                </div>
                <div class="after-sale-info">
                    <span><a href="javascript:void(0);">
                            <i class="iconfont icon-tick"></i>
                            <em>小米自营</em>
                        </a>
                    </span>
                    <span><a href="javascript:void(0);">
                            <i class="iconfont icon-tick"></i>
                            <em>小米发货</em>
                        </a>
                    </span>
                    <span><a href="javascript:void(0);">
                            <i class="iconfont icon-tick"></i>
                            <em>7天无理由退货</em>
                        </a>
                    </span>
                    <span><a href="javascript:void(0);">
                            <i class="iconfont icon-tick"></i>
                            <em>运费说明</em>
                        </a>
                    </span>
                    <span><a href="javascript:void(0);">
                            <i class="iconfont icon-tick"></i>
                            <em>企业信息</em>
                        </a>
                    </span>
                    <span><a href="javascript:void(0);">
                            <i class="iconfont icon-tick"></i>
                            <em>售后服务政策</em>
                        </a>
                    </span>
                    <span><a href="javascript:void(0);">
                            <i class="iconfont icon-tick"></i>
                            <em>7天价格保护</em>
                        </a>
                    </span>
                </div>
            </div>
        </div>`
        // -----------------------
        goodName=` <div class="xm-nav">
        <div class="container">
            <h2>${ele.name}</h2>
            <a href="#">用户评价</a>
        </div>
    </div>`
           }
           this.cont.innerHTML=html;
           this.goodsName.innerHTML=goodName;
       })
   

      
    }

      
 static addCart(id,num){
   
        let cartGoods=localStorage.getItem('cart')
    
        // 判断是否有值
        if(cartGoods){
            //有的话
            cartGoods=JSON.parse(cartGoods);
            for(let attr in cartGoods){
                attr==id &&(num=num+cartGoods[attr])
            }
            cartGoods[id]=num;
            localStorage.setItem('cart',JSON.stringify(cartGoods))
        }else{
            //没有
            cartGoods={[id]:num}
            localStorage.setItem('cart',JSON.stringify(cartGoods))
        }
     
      alert('加入成功')

 
    }
   
}

new Goods;